<template>
  <div class="si-form">
    <el-form
      ref="si-form"
      :model="formData"
      :size="size"
      :label-width="formAttrs['label-width'] || labelWidth"
      :inline="formAttrs['inline'] || false"
      v-bind="formAttrs"
    >
      <el-form-item
        v-for="{ attrs, on, ...restProps } in formItems"
        :key="restProps.prop"
        :label="restProps.label"
        :prop="restProps.prop"
        class="formItem"
      >
        <slot
          v-if="restProps.slotName"
          :name="restProps.slotName"
          :scope="{ attrs, on, restProps }"
        />
        <template v-else>
          <!-- 输入框 -->
          <el-input
            v-if="restProps.type === 'Input' && !attrs['fetch-suggestions']"
            v-model="formData[restProps.prop]"
            :style="'width:' + (attrs['width'] || '320px')"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @input="
              ;(on && on.input && on.input(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          />
          <el-autocomplete
            v-if="restProps.type === 'Input' && attrs['fetch-suggestions']"
            v-model="formData[restProps.prop]"
            :style="'width:' + (attrs['width'] || '320px')"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @input="
              ;(on && on.input && on.input(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 下拉框 -->
          <el-select
            v-if="restProps.type === 'Select'"
            v-model="formData[restProps.prop]"
            :style="'width:' + (attrs['width'] || '320px')"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          >
            <el-option
              v-for="op in attrs.options"
              :key="op.value"
              :label="op.label"
              :value="op.value.toString()"
            />
          </el-select>
          <!-- 级联 -->
          <el-cascader
            v-if="restProps.type === 'Cascader'"
            v-model="formData[restProps.prop]"
            :style="'width:' + (attrs['width'] || '320px')"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 穿梭框 -->
          <el-transfer
            v-if="restProps.type === 'Transfer'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 单选 -->
          <el-radio-group
            v-if="restProps.type === 'Radio'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
          >
            <el-radio
              v-for="ra in attrs.options"
              :key="ra.value"
              :label="ra.value"
            >
              {{ ra.label }}
            </el-radio>
          </el-radio-group>
          <!-- 单选按钮 -->
          <el-radio-group
            v-if="restProps.type === 'RadioButton'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
          >
            <el-radio-button
              v-for="ra in attrs.options"
              :key="ra.value"
              :label="ra.value"
            >
              {{ ra.label }}
            </el-radio-button>
          </el-radio-group>
          <!-- 复选框 -->
          <el-checkbox-group
            v-if="restProps.type === 'Checkbox'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
          >
            <el-checkbox
              v-for="ch in attrs.options"
              :key="ch.value"
              :label="ch.value"
            >
              {{ ch.label }}
            </el-checkbox>
          </el-checkbox-group>
          <!-- 日期 -->
          <el-date-picker
            v-if="restProps.type === 'Date'"
            v-model="formData[restProps.prop]"
            :style="
              'width:' +
                (attrs['width'] ||
                  (attrs['type'] && attrs['type'].indexOf('timerang') > 0)
                  ? '350px'
                  : '320px')
            "
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 时间 -->
          <el-time-select
            v-if="restProps.type === 'Time'"
            v-model="formData[restProps.prop]"
            :style="'width:' + (attrs['width'] || '320px')"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @blur="
              ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                function() {}
            "
            @focus="
              ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 滑块 -->
          <el-slider
            v-if="restProps.type === 'Slider'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
            @input="
              ;(on && on.input && on.input(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 开关 -->
          <el-switch
            v-if="restProps.type === 'Switch'"
            v-model="formData[restProps.prop]"
            v-bind="attrs"
            @change="
              ;(on && on.change && on.change(formData[restProps.prop])) ||
                function() {}
            "
          />
          <!-- 上传照片 -->
          <si-upload v-if="restProps.type === 'upload'" :upload="attrs" />
        </template>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item v-if="formButtons.length">
        <el-button
          v-for="(item, index) in formButtons"
          :key="index"
          :loading="loading"
          :size="item.attrs['size'] || size"
          v-bind="item.attrs"
          @click="item.on.click(formData)"
        >
          {{ item.label }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SiForm',
  props: {
    // loading
    loading: {
      type: Boolean,
      default: false
    },
    // lebel 宽度
    labelWidth: {
      type: String,
      default: '120px'
    },
    // 组件尺寸
    size: {
      type: String,
      default: 'medium'
    },
    // form 属性
    formAttrs: {
      type: Object,
      default: () => {}
    },
    // form 表单项
    formItems: {
      type: Array,
      default: () => []
    },
    // form 表单项对应数据
    formData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 按钮list
    formButtons: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.form {
  width: 100%;
}
</style>
